import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Table, Modal, Select, Spin } from 'antd';
import AddMatModalForm from './AddMatModalForm';
import changeName from './changeTxt';

const { Option } = Select;
@connect(({ inservicematerial, loading }) => ({
  inservicematerial,
  loading: loading.models.inservicematerial,
}))
@Form.create()
class JudgeMatModal extends PureComponent {
  state = {
    nowPage: 1, // 当前页
    pageNum: 5, // 单页条数
  };

  componentDidMount() {}

  changeBig = value => {
    if (value) {
      const { changeBig } = this.props;
      changeBig(value);
    }
  };

  changeBigcode = value => {
    const { metrialLocalData } = this.props;
    setTimeout(() => {
      metrialLocalData(1, 10, { matId: value });
    }, 0);
  };

  inputChange = value => {
    const { metrialLocalData } = this.props;
    setTimeout(() => {
      metrialLocalData(1, 10, { inpType: value });
    }, 0);
  };

  okJudge = () => {
    const { okJudge } = this.props;
    const { selectedRows } = this.state;

    okJudge(selectedRows);
  };

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  };

  handleLogicChange = value => {
    const { handleLogicChange } = this.props;
    handleLogicChange(value);
  };

  clearSelected = () => {
    this.setState({ selectedRowKeys: [], selectedRows: [], nowPage: 1, pageNum: 5 });
  };

  render() {
    const { selectedRowKeys, nowPage, pageNum } = this.state;
    const {
      visJudge,
      modelsData,
      metrialLocalData,
      handleModalJudgeVisible,
      inputType,
      loading,
      flagList,
    } = this.props;
    const formItemLayoutJudge = {
      labelCol: {
        span: 10,
      },
      wrapperCol: {
        span: 14,
      },
    };
    //  添加判断的多选
    const rowSelectionJudge = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    const logicOption = modelsData.logicList.map(value => (
      <Option key={value.itemCode}>
        {value.itemName}
      </Option>
    ));
    const columnsJudge = [
      {
        title: '材料名称',
        dataIndex: 'matName',
        onHeaderCell: () => ({ style: { width: '25%', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '输入类型',
        dataIndex: 'inpTypeName',
        onHeaderCell: () => ({ style: { width: '25%', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '是否支持判断',
        dataIndex: 'judgeFlagName',
        onHeaderCell: () => ({ style: { width: '25%', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    const paginations = {
      current: nowPage,
      pageSize: pageNum,
      total: modelsData.cmTotal,
      showSizeChanger: true,
      size: 'small',
      onChange: (page, pageSize) => {
        this.setState({ nowPage: page, pageNum: pageSize });
        metrialLocalData(page, pageSize);
      },
      onShowSizeChange: (current, size) => {
        this.setState({ nowPage: current, pageNum: size });
        metrialLocalData(current, size);
      },
      showTotal: total => {
        const totalPage =
          total < paginations.pageSize ? 1 : Math.ceil(total / paginations.pageSize);
        return `共 ${total} 条记录 第 ${nowPage} / ${totalPage}页`;
      },
    };

    return (
      <div>
        {/*  添加判断弹框  */}
        <Modal
          title="请选择判断属性"
          visible={visJudge}
          onOk={this.okJudge}
          onCancel={() => handleModalJudgeVisible(false)}
          afterClose={this.clearSelected}
          destroyOnClose
        >
          <Form>
            <Row style={{ borderBottom: '1px solid #e8e8e8', marginBottom: 26 }}>
              <Col span={11}>
                <Form.Item {...formItemLayoutJudge} label={<span>判断条件 </span>}>
                  {loading ? (
                    <Spin tip="Loading..." size="large" />
                  ) : (
                    <Select
                      style={{ width: '100%' }}
                      labelInValue
                      value={modelsData.tValueCode}
                      onChange={this.handleLogicChange}
                    >
                      {logicOption}
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <AddMatModalForm
              inputChange={this.inputChange}
              changeBig={this.changeBig}
              changeBigcode={this.changeBigcode}
              inputType={inputType}
            />
          </Form>
          <Table
            dataSource={changeName(modelsData.tableJudge, inputType, flagList)}
            columns={columnsJudge}
            rowSelection={rowSelectionJudge}
            rowKey={record => record.matId}
            style={{ backgroundColor: '#fff', textAlign: 'center' }}
            pagination={paginations}
          />
        </Modal>
      </div>
    );
  }
}
export default JudgeMatModal;
